<template>
  <el-autocomplete class="sys-autocomplete" v-model="showValue" :value-key="valueKey" :placeholder="placeholder" :size="size" :placement="placement"
    :disabled="disabled" :fetch-suggestions="getSuggestionData" @change="handleChange" @blur="handleBlur">
    <template slot-scope="scope" v-if="hasSlot">
      <slot :item="scope.item"></slot>
    </template>
  </el-autocomplete>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      valueKey: {
        type: String,
        default: "value"
      },
      options: {
        type: Array,
        default () {
          return [];
        }
      },
      openAllDropdown: {
        type: Boolean,
        default: false
      },
      fetchSuggestions: Function,
      size: String,
      placement: String,
      disabled: Boolean,
      placeholder: String
    },

    watch: {
      value() {
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }
        this.showValue = this.value;
      }
    },

    computed: {
      hasSlot() {
        return this.$slots.default || this.$scopedSlots.default;
      }
    },

    data() {
      return {
        showValue: this.value,
        inputValue: null,
        hasShowAllOption: this.openAllDropdown
      };
    },

    methods: {
      getSuggestionData(queryStr, cb) {
        let fetchSuggestions = this.fetchSuggestions;
        let hasShowAllOption = this.hasShowAllOption;
        if (fetchSuggestions !== undefined) {
          fetchSuggestions(queryStr, cb, hasShowAllOption);
          if (hasShowAllOption) {
            this.hasShowAllOption = false;
          }
          return;
        }

        let options = this.options;
        if (SystemUtil.isEmpty(options)) {
          options = [];
        }
        if (hasShowAllOption) {
          this.hasShowAllOption = false;
          queryStr = '';
        }
        let data = [];
        if (options.length !== 0) {
          let valueKey = this.valueKey;
          let type = typeof options[0];
          queryStr = queryStr.toLocaleLowerCase();
          if (type !== 'object') {
            if (queryStr !== '') {
              data = _.filter(options, str => {
                if (typeof str === 'string') {
                  str = str.toLocaleLowerCase();
                } else {
                  str = str + '';
                }
                return str.indexOf(queryStr) !== -1;
              });
            } else {
              data = options;
            }
            data = _.map(data, str => {
              let obj = {};
              obj[valueKey] = str;
              return obj;
            });
          } else {
            if (queryStr !== '') {
              data = _.filter(options, obj => {
                let str = obj[valueKey];
                if (str === undefined || str === null) {
                  return false;
                }
                str += "";
                str = str.toLocaleLowerCase();
                return str.indexOf(queryStr) !== -1;
              });
            } else {
              data = _.cloneDeep(options);
            }
          }
        }
        cb(data);
      },

      handleChange() {
        let showValue = this.showValue;
        if (this.value === showValue) {
          return;
        }

        this.inputValue = showValue;
        this.$emit('input', showValue);
        this.$emit('change', showValue);
      },

      handleBlur() {
        if (this.openAllDropdown) {
          this.hasShowAllOption = true;
        }
      }
    }
  };

</script>

<style lang="scss" scoped>


</style>
